<template>
	<view class="orderDetail">
		<view class="report">
			<view class="top">
				<image style="width: 50%;" src="http://applet.atptest.com/2023081701.png" mode="widthFix">
			</view>
			<view class="body">
				<view class="title">检测报告</view>
				<view class="content">
					<view style="color: #878787;font-size: 36rpx;">检测结论：</view>
					<view style="font-size: 24rpx;font-size: 24rpx;font-weight: bold;">
						<view v-if="reportInfo.checkConclusion && reportInfo.checkConclusion.length > 0">
							<view v-for="(item,index) in reportInfo.checkConclusion" :key="index">
								<text>{{item.value}}</text>
								<text v-if="item.state"
									:style="{color: item.state == '检测未通过' ? 'red' : '#000'}">{{item.state}}</text>
							</view>
						</view>
						<view v-else>无</view>
					</view>
					<view style="color: #878787;font-size: 36rpx;">判定说明：</view>
					<view style="font-size: 24rpx;font-weight: bold;">
						<view v-if="reportInfo.checkDetermine && reportInfo.checkDetermine.length > 0">
							<view v-for="(item,index) in reportInfo.checkDetermine" :key="index"
								:style="{color: item.indexOf('注：') != -1 ? 'red' : '#000'}">
								<text v-if="reportInfo.checkDetermine.length > 0">{{index + 1}}、</text>
								{{item}}
							</view>
						</view>
						<view v-else>无</view>
					</view>
				</view>
				<view class="notice">* 鹏城测试判定仅对本次送样物品负责</view>
				<view class="pass">
					<image style="width: 100%;" v-if="reportInfo.checkState==1"
						src="http://applet.atptest.com/2023081703.png" mode="widthFix"></image>
					<image style="width: 100%;" v-if="reportInfo.checkState==0"
						src="http://applet.atptest.com/2023081704.png" mode="widthFix"></image>
					<view v-if="reportInfo.checkState == null || reportInfo.checkState == 2"></view>
				</view>
			</view>
		</view>
		<view class="detail">
			<view class="info_container">
				<view class="left">
					<image style="width: 100%;height: 100%;" v-if="!reportInfo.img"
						src="http://applet.atptest.com/2023081702.jpg" mode="aspectFill"></image>
					<image style="width: 100%;height: 100%;" v-else :src="reportInfo.img" mode="aspectFill"></image>
				</view>
				<view class="info">
					<view class="info_item">
						<view class="label">检测单号：</view>
						<view class="text">{{reportInfo.orderNo || ""}}</view>
					</view>
					<view class="info_item">
						<view class="label">检测型号：</view>
						<view class="text">{{reportInfo.model || ""}}</view>
					</view>
					<view class="info_item">
						<view class="label">检测项目：</view>
						<view class="text">{{reportInfo.project || ""}}</view>
					</view>
					<view class="info_item">
						<view class="label">检测日期：</view>
						<view class="text">{{reportInfo.checkTime || ""}}</view>
					</view>
					<view class="info_item">
						<view class="label">检测结果：</view>
						<view class="text">{{reportInfo.checkResult || ""}}</view>
					</view>
					<view class="info_item">
						<view class="label">优惠券：</view>
						<view class="text" v-if="reportInfo.list.length > 0">
							<view>
								{{reportInfo.list}}
							</view>
						</view>
						<view class="text" v-else>无</view>
					</view>
				</view>
			</view>
			<view class="price_container">
				<view class="price_item">
					支付方式：{{reportInfo.payMethod}}
				</view>
				<view class="price_item">
					订单金额：￥{{reportInfo.total}}
				</view>
			</view>
		</view>
		<!-- <view class="pic">
			<view style="font-size: 38rpx;">订单图片</view>
			<view class="img">
				<uni-file-picker readonly v-model="imageList" :imageStyles="imageStyles" fileMediatype="image"
					file-extname="png,jpg" />
			</view>
		</view> -->
		<view class="logistics" v-if="logisticsList.length > 0">
			<u-steps dot="true" direction="column">
				<u-steps-item v-for="(item,index) in logisticsList" :key="index" :title="item.content"
					:desc="item.time">
				</u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	import {
		logisticsInfo
	} from "../../../api/address.js"
	import {
		QueryOrderDetail
	} from "../../../api/order.js"
	export default {
		data() {
			return {
				orderNo: '',
				order: {},
				state: '',
				imageList: [],
				imageStyles: {
					width: 110,
					height: 110,
				},
				timer: '',
				logisticsList: [],
				reportInfo: {
					checkDetermine: "",
					list: [],
					checkJsonItem: {
						failA: "",
						successA: "",
						successB: "",
						successC: ""
					}
				}
			};
		},
		methods: {
			// 优惠券转换
			getTicket(sortData) {
				if (sortData && sortData.length > 0) {
					let sorted = this.groupBy(sortData, item => {
						return item.item2; // 返回需要分组的对象
					});
					let str = "";
					for (let i = 0; i < sorted.length; i++) {
						str +=
							sorted[i][0].item2 +
							"*" +
							sorted[i].length +
							(i != sorted.length - 1 ? "、" : "");
					}
					return str;
				} else {
					return [];
				}
			},
			groupBy(array, f) {
				let groups = {};
				array.forEach(o => {
					let group = JSON.stringify(f(o));
					groups[group] = groups[group] || [];
					groups[group].push(o);
				});
				return Object.keys(groups).map(group => {
					return groups[group];
				});
			},

			//获取订单详情
			async getInfo() {
				this.reportInfo.checkDetermine = []
				let list = {
					orderNo: this.orderNo
				}
				const res = await QueryOrderDetail(list)
				if (res) {
					this.reportInfo = res
					this.reportInfo.list = this.getTicket(res.list)
					this.reportInfo.checkDetermine = !this.reportInfo.checkDetermine ? "" : this.reportInfo
						.checkDetermine
					if (this.reportInfo.checkDetermine) {
						if (this.reportInfo.checkDetermine.indexOf("@@") != -1) {
							this.reportInfo.checkDetermine = this.reportInfo.checkDetermine.split("@@")
						} else {
							this.reportInfo.checkDetermine = this.reportInfo.checkDetermine.split()
						}
					}else{
						this.reportInfo.checkDetermine = []
					}
					if (this.reportInfo.checkJsonItem) {
						if (this.reportInfo.checkJsonItem.successA) {
							let successAB = `样品经过化学开盖，内部晶圆呈现 ${this.reportInfo.checkJsonItem.successA}
							模具标记，验证该部件是由 ${this.reportInfo.checkJsonItem.successB} 制造的`
							this.reportInfo.checkDetermine.push(successAB)
						}
						if (this.reportInfo.checkJsonItem.successC) {
							this.reportInfo.checkDetermine.push(this.reportInfo.checkJsonItem.successC)
						}
						if (this.reportInfo.checkJsonItem.failA) {
							this.reportInfo.checkDetermine.push(this.reportInfo.checkJsonItem.failA)
						}
					}
					if (res.checkConclusion) {
						if (res.checkConclusion.indexOf(";") != -1) {
							this.reportInfo.checkConclusion = this.reportInfo.checkConclusion.split(";").map(item => {
								return {
									value: item.split("#")[0],
									state: item.split("#")[1]
								}
							})
						} else {
							this.reportInfo.checkConclusion = this.reportInfo.checkConclusion.split().map(item => {
								return {
									value: item.split("#")[0],
									state: item.split("#")[1]
								};
							});
						}
						this.reportInfo.checkConclusion.forEach(item => {
							if (item.value.indexOf("【") == -1) {
								item.value = item.value.split("");
								item.value.splice(0, 0, "【");
								item.value = item.value.join("");
							}
							if (item.value.indexOf("】") == -1) {
								item.value = item.value.concat("】");
							}
						});
					}
					this.getLogisticsInfo({
						waybillNumber: this.reportInfo.returnWaybillNo,
						phone: this.reportInfo.regularPhone
					})
				}
			},

			//获取物流信息
			async getLogisticsInfo(data) {
				let res = await logisticsInfo(data)
				if (res) {
					this.logisticsList = res.routeInfo
				} else {
					this.logisticsList = []
				}
			}
		},
		onLoad: function(option) {
			this.orderNo = option.i
		},
		onShow() {
			this.getInfo()
		},
		onUnload() {
			clearTimeout(this.timer);
		}
	}
</script>

<style lang="scss" scoped>
	.orderDetail {
		padding: 20rpx;

		.report {
			padding: 10rpx;
			margin-bottom: 10px;
			// border-radius: 8rpx;
			// box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
			border: 2px solid #000;

			.top {
				text-align: center;
				margin: 0 20rpx 10rpx;
				border-bottom: 1px solid #e5e5e5;
			}

			.body {
				position: relative;

				.title {
					font-size: 40rpx;
					text-align: center;
				}

				.content {
					padding: 10rpx 40rpx;

					view {
						margin: 20rpx 0;
					}
				}

				.notice {
					text-align: center;
					color: #878787;
					font-size: 28rpx;
					margin-bottom: 20rpx;
				}

				.pass {
					position: absolute;
					width: 220rpx;
					right: 0;
					top: 0;
				}
			}
		}

		.detail {
			padding: 20rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);

			.info_container {
				display: flex;
				justify-content: space-between;
				border-bottom: 2px solid #000;
				padding-bottom: 16rpx;
			}

			.left {
				width: 35%;
				margin-right: 10rpx;
				border: 2px solid rgb(0, 0, 0);
			}

			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.info_item {
					display: flex;
					color: rgb(0, 0, 0);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: bold;

					.label {
						width: 140rpx;
						text-align: right;
					}

					.text {
						flex: 1;
						word-break: break-all;
					}
				}
			}

			.price_container {
				display: flex;
				justify-content: space-between;
				margin-top: 16rpx;
				padding-bottom: 54rpx;

				.price_item {
					color: rgb(0, 0, 0);
					font-family: 思源黑体;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}

		.logistics {
			margin-top: 10px;
			padding: 10rpx;
			font-size: 28rpx;
			border-radius: 8rpx;
			box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
		}

		.pic {
			margin-top: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: #fff;
		}
	}

	/deep/ .uni-file-picker__container {
		display: flex;
		flex-wrap: wrap;
		justify-content: left;
	}
</style>